<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      获取范围内的随机整数
    */

    /*
      拿到 0 ~ 10 之间的随机整数[0, 10]
        1. 拿到一个随机小数  Math.random()
        2. 用拿到的数字 * 10    0 ~ 9.999
        3. 进行四舍五入的取整

      拿到的数字和取整之间的关系
        0 ~ 0.499       0
        0.5 ~ 1.499     1
        ...
        8.5 ~ 9.499     9
        9.5 ~ 9.999     10

      拿到 0 ~ 10 之间的随机整数[0, 10] 改版
        1. 拿到一个随机小数  Math.random()
        2. 用拿到的数字 * (10 + 1)    0 ~ 9.999
        3. 进行四舍五入的取整
          => 向上取整    要求取整以前  -0.999 ~ 9.999
          => 向下取整    要求取整以前  0 ~ 10.999
          => 因为 random 的随机数字是 0 ~ 1 之间
    */

    // 方案1: 不是很好
    // var r1 = Math.random()
    // var r2 = r1 * 10
    // var r3 = Math.round(r2)
    // console.log(r3)

    // 方案2:
    // var r1 = Math.random()
    // var r2 = r1 * (10 + 1)
    // var r3 = Math.floor(r2)




    /*
      需求: 求 0 ~ 20 之间的随机整数
        1. random 出现一个随机数字
        2. 随机小数 * (20 + 1)
        3. 向下取整
    */


    /*
      需求: 求 0 ~ y 之间的随机整数
        1. random 出现一个随机数字
        2. 随机小数 * (y + 1)
        3. 向下取整
    */


    /*
      需求: 求 10 ~ 20 之间的随机整数
        1. 求出 0 ~ 10 之间的随机整数
        2. 随机整数 + 10
    */

    /*
      需求: 求 20 ~ 30 之间的随机整数
        1. 求出 0 ~ 10 之间的随机整数
        2. 随机整数 + 20
    */

    /*
      需求: 求 10 ~ 30 之间的随机整数
        1. 求出 0 ~ 20 之间的随机整数
        2. 随机整数 + 10
    */

    /*
      需求: 求 min ~ max 之间的随机整数
        1. 求出 0 ~ (max - min) 之间的随机整数
        2. 随机整数 + min
    */




    // 32 ~ 41
    // var obj = {}
    // for (var i = 0; i < 1000000; i++) {
    //   var res = Math.floor(Math.random() * (9 + 1)) + 32
    //   obj[res] ? obj[res]++ : obj[res] = 1
    // }
    // console.log(obj)


    // 封装起来
    // 我通常用到的是 0 ~ 255 之间的随机整数
    // 在其次 0 ~ x 用的多
    // 最少的就是 x ~ y
    // 定义函数方式1: function randomNum(a, b) {}
    //   将来使用的时候: randomNum(0, 255) randomNum(0, 10) randomNum(10, 20)
    // 定义函数方式1: function randomNum(a = 255, b = 0) {}
    //   将来使用的时候 randomNum()  randomNum(10) randomNum(10, 20)

    // function randomNum(a = 255, b = 0) {
    //   // 1. 确定大小数
    //   var max = Math.max(a, b)
    //   var min = Math.min(a, b)

    //   // 2. 使用公式计算一个随机整数
    //   var res = Math.floor(Math.random() * (max - min + 1)) + min

    //   // 3. 返回求出的随机数字
    //   return res
    // }

    // var res = randomNum(30, 20)
    // console.log(res)
  </script>

  <script src="./utils.js"></script>
  <script>
    /*
      封装函数, 生成一个随机颜色字符串
        + #FFFFFF
        + rgb(255, 255, 255)
    */

    // function randomColor() {
    //   var res = `rgb(${ randomNum() }, ${ randomNum() }, ${ randomNum() })`
    //   return res
    // }

    // console.log(randomColor())

    // document.body.style.backgroundColor = randomColor()


    randomColor()
    function randomColor() {
      // 十六进制
      var str = '#'

      // 方案1: 生成六个 0 ~ 15 的随机整数, 转换成十六进制, 拼接在一起
      // for (var i = 0; i < 6; i++) {
      //   // 生成随机数
      //   var r = randomNum(15)
      //   // 把 r 这个数字转换成十六进制
      //   // 语法, 数字.toString(进制数)
      //   var r2 = r.toString(16)
      //   // 一个一个的拼接到 str 身上
      //   str += r2
      // }

      // 方案2: 生成三组 0 ~ 255 的数字, 转换成 十六进制, 拼接在一起
      for (var i = 0; i < 3; i++) {
        var r = randomNum()
        var r2 = r.toString(16)
        if (r <= 15) r2 = '0' + r2
        str += r2
      }


      // console.log(str)
      // 返回拼接结果
      return str
    }

    // document.body.style.backgroundColor = randomColor()

    // #FFFFFF   白
    // #FF0000   红
    // #00FF00   绿
    // #0000FF   蓝
    // #000000   黑
    // document.body.style.backgroundColor = '#333300'
  </script>
</body>
</html>
